<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-29 10:11:53
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-dialog title="" :visible.sync="showDetail" width="50%" :before-close="handleClose">
            <div style="overflow:auto;text-align: center;" :style="{ 'height': 60 + 'vh' }">
                <span style="font-size: 20px;color: #3F3F3F;">更换日志</span>
                <div class="formItem-main" >

                    <section v-loading="loading">
                        <div>
                            <div v-for="(item, index) in tableList" :key="index" style="margin-top: 10vh;">
                                <div class="time" style="display: flex;align-items: center;">
                                    <div
                                        style="width: 10px;height: 10px;border-radius: 50%;background-color: #5CD8DA;margin-right: 10px;">
                                    </div>
                                    <div style="font-size: 18px;color: #000;">
                                        {{ item.operTime }} {{ item.operName }}
                                    </div>

                                </div>
                                <div
                                    style="border-left: 3px solid #DFDFDF;margin-left: 3px;padding: 20px;padding-bottom: 40px;text-align: left;">
                                    <div style="font-size: 18px;">
                                        <div style="margin-bottom: 10px;">更换时使用次数：{{ item.useNext }}</div>
                                        <div>最大压接次数：{{ item.maxNext }}</div>
                                    </div>
                                </div>

                            </div>
                            <div style="text-align: center;margin-top: 20vh;" v-if="showPageNo">
                                <img src="@/assets/defaultLoad.png" alt="">
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>

export default {
    props: {
        showDetail: {
            type: Boolean
        },
        detailItem: {
            type: [Object]
        }
    },
    data() {
        return {
            loading: false,
            reason: '',
            textarea: '',
            tableList: [],
            showPageNo: false,
            tableHeight: 500,
        }
    },
    mounted() {

        this.searchDetail();
    },

    methods: {
        handleClose(done) {
            this.$emit('closeformReason')
        },
        
       
        searchDetail() {
            this.loading = true;
            this.$baseRequestGetParams('/mold/replace-record/getList/' + this.detailItem.id, {}, {}, 'get').then(res => {
                this.tableList = res.data;
                this.loading = false;
                this.showPageNo = this.tableList.length == 0 ? true : false;

            }).catch(res => {
                this.loading = false;
            })
        },

      
        clickBack() {
            this.$emit('closeformReason')
        },
      

    }
}
</script>
<style>
.reoffer .el-dialog__body {
    padding-top: 15px;
}
</style>
<style lang="scss" scoped>
.title-box-name {
    position: relative;
    margin-left: 10px;
    font-size: 18px;
}

.title-box-name::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0px;
    width: 4px;
    height: 19px;
    border-radius: 2px;
    background-color: #5CD8DA;

}
</style>
  